<template>
	<view class="brand">
		<navBar isBack title="品牌筛选"></navBar>

		<view class="b_container">
			<!-- 搜索 -->
			<view class="b_search">
				<view class="b_sInput">
					<view class="i_siIcon"><view class="iconfont icon-search"></view></view>
					<input type="text" @input="searchBrand" placeholder="查找品牌" placeholder-class="col-666" />
				</view>
			</view>

			<scroll-view class="b_scroll" scroll-y :scroll-into-view="scrollSort">
				<!-- 精选推荐 -->
				<view class="b_recomd" v-if="choiceList && choiceList.length" id="sortTop">
					<view class="b_rTitle">精选推荐</view>
					<view class="b_rList">
						<view class="b_rItem" v-for="item in choiceList" @tap="toPage('store', { storeId: item.store_id })">
							<view class="b_rImg"><image :src="item.store_logo"></image></view>
							<view class="b_rTxt">{{ item.store_name }}</view>
						</view>
					</view>
				</view>

				<!-- 数据 -->
				<view class="b_sort">
					<view class="b_sGroup" v-for="items in filterList" :key="items.sort" :id="'sort' + items.sort">
						<view class="b_sTit">{{ items.sort }}</view>
						<view class="b_sList">
							<view class="b_sItem" v-for="item in items.list" :key="item.store_id" @tap="toPage('store', { storeId: item.store_id })">
								<view class="b_sLogo"><image :src="item.store_logo"></image></view>
								<view class="b_sName">{{ item.store_name }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 筛选 -->
		<view class="b_filter" @touchstart.stop.prevent="sortTouchMove" @touchmove.stop.prevent="sortTouchMove" id="filter">
			<view class="b_fLetter" v-for="item in filter" :data-sort="item">{{ item }}</view>
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js';
import navBar from '@/components/navBar/navBar.vue';
import service_mall from '@/service/mall.js';
import $HTTPS from '@/service/DIY.js';
export default {
	components: { navBar },

	data() {
		return {
			ImageUrl: URL.IMAGE,
			filter: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			filterItemHeight: null,
			filterItemTop: null,
			choiceList: [], // 精选推荐品牌
			brandList: [], // 品牌数据
			filterList: [], // 筛选后的品牌数据
			searchVal: '',
			scrollSort: null
		};
	},

	onLoad() {
		this.$utils.getUrl();
		this.getList();
	},

	onReady() {
		// 获取筛选的字母高度
		setTimeout(() => {
			uni.createSelectorQuery()
				.select('#filter')
				.boundingClientRect()
				.exec(res => {
					this.filterItemTop = res[0].top;
					this.filterItemHeight = res[0].height / this.filter.length;
				});
		}, 200);
	},

	methods: {
		// 获取品牌列表
		getList() {
			service_mall
				.brand_getList()
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						let filter = this.filter;
						let brandList = data.LstStore;
						let brand = {};
						let nList = [];
						// 处理数据
						for (let i = 0; i < filter.length; i++) {
							for (let j = 0; j < brandList.length; j++) {
								let letter = filter[i];
								if (letter === brandList[j].sort) {
									brand[letter] ? brand[letter].push(brandList[j]) : (brand[letter] = [brandList[j]]);
								}
							}
						}
						for (let key in brand) {
							nList.push({ sort: key, list: brand[key] });
						}

						this.filterList = nList;
						this.brandList = nList;
						this.choiceList = data.pushStore;
					} else {
						this.$utils.showErr({ title: res.msg });
					}
				})
				.catch(err => {
					this.$utils.showErr();
				});
		},

		// 搜索品牌
		searchBrand(e) {
			let value = e.detail.value;

			if (this.searchTimer) clearTimeout(this.searchTimer);
			if (value && value.trim()) {
				this.searchTimer = setTimeout(() => {
					let brandList = this.brandList;
					let newList = [];
					for (let i = 0; i < brandList.length; i++) {
						let brand = brandList[i].list;
						let data = { sort: brandList[i].sort, list: [] };
						for (let j = 0; j < brand.length; j++) {
							if (brand[j].store_name.indexOf(value.trim()) != -1) {
								data.list.push(brand[j]);
							}
						}
						if (data.list.length) newList.push(data);
					}

					this.searchEdit = true;
					this.filterList = newList;
				}, 500);
			} else {
				if (this.searchEdit) {
					this.filterList = this.brandList;
					this.searchEdit = false;
				}
			}
		},

		sortTouchMove(e) {
			let pageY = e.touches[0].pageY;
			let index = Math.floor((pageY - this.filterItemTop) / this.filterItemHeight);
			let sort = this.filter[index];
			if (sort) {
				this.intoSort(sort);
			}
		},

		intoSort(sort) {
			if (this.scrollSort !== sort) this.scrollSort = sort === '#' ? 'sortTop' : 'sort' + sort;
		},

		// 跳转页面
		toPage(page, { storeId } = {}) {
			if (page === 'store') {
				var that = this;
				$HTTPS
					.GetDiyData({
						partner_id: storeId
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							console.log(data);
							if (data.content) {
								uni.navigateTo({ url: '/pages_mall/pages/Decoration/view/index?storeId=' + storeId });
							} else {
								uni.navigateTo({ url: '/pages_mall/pages/mall/store/storeNew?storeId=' + storeId });
							}
						} else {
							that.$utils.showErr({
								title: res.msg
							});
						}
					})
					.catch(err => {
						that.$utils.showErr({
							title: err
						});
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.brand {
	height: 100vh;
	background: #f8f8f8;
	display: flex;
	flex-flow: column;
	.b_container {
		position: relative;
		overflow: hidden;
		flex: 1;
	}
	// 搜索
	.b_search {
		width: 100%;
		height: 122rpx;
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		overflow: hidden;
		.b_sInput {
			height: 74rpx;
			padding: 0 70rpx;
			margin: 24rpx 36rpx 0;
			border-radius: 38rpx;
			background: rgba(246, 247, 251, 0.8);
			position: relative;
			& > input {
				width: 100%;
				height: 100%;
			}
			.i_siIcon {
				width: 70rpx;
				height: 74rpx;
				line-height: 74rpx;
				color: #666;
				font-size: 32rpx;
				padding-left: 28rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	.b_sName {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 70%;
	}
	.b_scroll {
		width: 100%;
		height: 100%;
		padding-top: 122rpx;
	}
	// 精选推荐
	.b_recomd {
		padding: 24rpx 0 56rpx 36rpx;
		background: #fff;
		.b_rTitle {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
		}
		.b_rList {
			display: flex;
			flex-wrap: wrap;
		}
		.b_rItem {
			width: 144rpx;
			height: 144rpx;
			margin: 32rpx 32rpx 0 0;
			border-radius: 8rpx;
			background: #f6f7fb;
		}
		.b_rImg {
			width: 96rpx;
			height: 96rpx;
			margin: 6rpx auto 0;
		}
		.b_rTxt {
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			color: #939393;
			font-size: 22rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	// 数据
	.b_sort {
		padding-bottom: 32rpx;
		.b_sGroup {
		}
		.b_sTit {
			height: 64rpx;
			line-height: 68rpx;
			font-weight: bold;
			padding-left: 36rpx;
			background: #f8f8f8;
			position: sticky;
			top: 0;
			z-index: 2;
		}
		.b_sList {
			padding-left: 38rpx;
			background: #fff;
		}
		.b_sItem {
			height: 138rpx;
			line-height: 138rpx;
			padding-left: 100rpx;
			position: relative;
			&::after {
				content: '';
				width: 100%;
				height: 1px;
				background: rgba(0, 0, 0, 0.08);
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(0.5);
			}
			&:nth-last-child(1)::after {
				content: none;
			}
		}
		.b_sLogo {
			width: 96rpx;
			height: 96rpx;
			margin-top: -48rpx;
			background: #f6f7fb;
			position: absolute;
			top: 50%;
			left: -14rpx;
		}
	}
	// 筛选
	.b_filter {
		width: 52rpx;
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 2;
		transform: translateY(-50%);
		.b_fLetter {
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			font-size: 20rpx;
			padding-left: 20rpx;
		}
	}
}
</style>
